import React, { Component } from 'react';
import Top from "./Top";
import { index_goodlist } from "../../tools/api";
import '../../scss/IndexTwo.scss';
import { Toast } from 'antd-mobile'

class IndexTwo extends Component {
    state = {
        navArr:[],
        pageNumber:1,
        shoppingLength:12,
    }
    render() {
        const val = this.state.pageNumber;
        return (
            <div className='indextwo'>
                <Top></Top>

                <div className='cut'>
                    <button onClick={ this.sub } value={ Number(val) - 1 }>⬅</button>
                    <button onClick={ this.add } value={ Number(val) + 1 }>➡</button>
                </div>

                    <div className="main">
                        {
                           this.state.navArr.map((item,index)=>{
                                return(
                                    <div className="mai" key={ index } onClick={ () => { this.gainId(item) } }>
                                        <div className="top_mai"><img src={ item.pic } alt="" /></div>

                                        <div className="main_mai">{ item.name }</div>

                                        <div className="bottom_mai">
                                            <div>抢购价<span>￥{ parseInt( item.salesPrice.value )  }</span></div>
                                        </div>
                                    </div>
                                )
                           })
                        }
                    </div>
            </div>
        );
    }

    add = (e) => {
        this.setState({ pageNumber:e.target.value })
        // console.log(e.target);
        if( this.state.pageNumber >= 21 ) return   Toast.show({ content:'已到最后一页!' })
        index_goodlist({ page:this.state.pageNumber,count:12 }).then( response => { this.setState({ navArr:response.data.list }) } ) 
    }
    
    sub = (e) => {
        this.setState({ pageNumber:e.target.value })
        console.log(e.target);
        if( this.state.pageNumber <= 1 ) return    Toast.show({ content:'已到第一页!' })
        index_goodlist({ page:this.state.pageNumber,count:12 }).then( response => { this.setState({ navArr:response.data.list }) } ) 
    }

    gainId = (item) => {
        // console.log(item);
        this.props.history.push({ pathname:'/particulars',state:{id:item.id} })
    }

    // 首次渲染
    componentDidMount() { index_goodlist({ page:this.state.pageNumber,count:this.state.shoppingLength }).then( response => { this.setState({ navArr:response.data.list }) } ) }
    
}

export default IndexTwo;